<html>
    <head>
    	<meta charset="utf-8">
    	<title>弹出层</title>
    	<style type="text/css">
	    	/*#btn{margin: 0 auto; }*/
            html,body{height: 100%;overflow: hidden;}
            body,div,h2{margin: 0px; padding: 0px;}
            h2{text-align: right;font-size: 12px;color: red;border: 1px solid #red;background: #FC0;}
            h2 span{border: 1px solid #f90; background: #fff;cursor:pointer;}/*cursor鼠标指针发生变化*/
            #overlay{width: 400px;height: 20px;border: 1px solid #f90;position: absolute;top:0;left:0;width: 100%;height: 100%;background: #000; opacity:0.5;}
            /*其它浏览器：opacity:0.5; IE浏览器：filter:alpha(opacity=50);设置透明度*/
            #win{position: absolute;top:20%;left:35%; width: 400px;height:150px; border: 1px solid #f90;}
    	</style>
    </head>
    <body>
        <div id="overlay"></div>
        <div id="win"><h2><span id="close">×</span></h2></div>
        <center><input type="button" value="弹出层" id="btn"/></center>
    </body>
    <script type="text/javascript">
        window.onload=function  () {
            var obtn=document.getElementById('btn');
            var ooverlay=document.getElementById('overlay');
            var owin=document.getElementById('win');
            var oclose=document.getElementById('close');
            obtn.onclick=function(){
                ooverlay.style.display='block';
                owin.style.display='block';
            }
            oclose.onclick=function(){
                ooverlay.style.display='none';
                owin.style.display='none';
            }
        }
    </script>
</html>